<template>
    <div class="configList">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>配置项管理</el-breadcrumb-item>
                <el-breadcrumb-item>配置项列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin:20px 0;">
            <el-button type="primary" @click="addFirst">新增配置项</el-button>
        </div>
        <!-- 内容 -->
        <div class="content">
            <el-collapse v-model="activeName" accordion>
                <el-collapse-item :name="index+1" v-for="(item,index) in configList" :key="index">
                    <template slot="title">
                        <div class="title">
                            {{item.name}}
                            <div class="iconBox">
                                <i class="el-icon-circle-plus-outline" @click.stop="addSecond(item.name,item.id)" title="新增子选项"></i>
                                <i class="el-icon-edit" @click.stop="toEditFirst(item)"></i>
                                <i class="el-icon-delete" @click.stop="delSecond(item.id)"></i>
                            </div>
                        </div>
                    </template>
                    <div class="item" v-for="(item1,index1) in item.sub" :key="index1">
                        {{item1.name}}
                        <div class="iconBox">
                            <i class="el-icon-edit" @click.stop="toEditSconed(item.name,item1)"></i>
                            <i class="el-icon-delete" @click.stop="delSecond(item1.id)"></i>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>

        <!-- 对话框 -->
        <el-dialog
        :title="dialogTit"
        :visible.sync="dialogVisible"
        @closed="closedFn"
        width="30%">
            <div class="dialogBox">
                <div class="tit" v-if="type==2">一级配置项名称：{{firstName}}</div>
                <el-form>
                    <el-form-item label="名称" label-width="60px">
                        <el-input v-model="form.name" type="text" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" label-width="60px">
                        <el-input v-model="form.sort" type="number" placeholder="请输入排序"></el-input>
                    </el-form-item>
                    <el-form-item label="配置值" label-width="60px">
                        <el-input v-model="form.value" type="text" placeholder="请输入配置值"></el-input>
                    </el-form-item>
                    <el-form-item v-if="type==1" label="键值" label-width="60px">
                        <el-input v-model="form.key" type="text" placeholder="请输入键值"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            activeName:'',
            configList:[],//配置项列表
            dialogVisible:false,
            type:1,//新增的配置项 1-父级，2-子级
            dialogTit:'新增配置项',
            firstName:'',//一级配置项名称
            form:{
                parent_id:'',
                name:'',
                sort:'',
                value:'',
                key:''
            },
            parentId:'', // 父级配置项id
        }
    },
    mounted() {
        this.getConfigList()
    },
    methods:{
        // 获取配置项列表
        getConfigList(){
            this.$http.post('/api/root/option/index').then(res=>{
                console.log(res,'配置项列表');
                if(res.code==1){
                    this.configList = res.data.list?res.data.list:[]
                }
            })
        },

        // 新增一级配置
        addFirst(){
            this.type = 1
            this.dialogVisible = true
            this.dialogTit='新增配置项'
        },

        // 新增子配置项
        addSecond(name,parentId){
            this.type = 2
            this.dialogVisible = true
            this.dialogTit = '新增子配置项'
            this.parentId = parentId
            this.firstName = name
        },

        // 编辑一级配置项
        toEditFirst(item){
            this.type = 1
            this.dialogVisible = true 
            this.dialogTit = '编辑配置项'
            this.form = item
        },
        // 编辑子配置项
        toEditSconed(name,item){
            this.type = 2
            this.dialogVisible = true 
            this.dialogTit = '编辑子配置项'
            this.parentId = item.parent_id
            this.firstName = name
            this.form = item
        },

        // 关闭对话框时的回调
        closedFn(){
            this.form = {
                parent_id:'',
                name:'',
                sort:'',
                value:'',
                key:''
            }
        },

        // 对话框确定按钮
        addSubmit(){
            this.form.parent_id = this.type==1?0:this.parentId;
            let url = this.form.id?'/api/root/option/edit':'/api/root/option/add';
            this.$http.post(url,this.form).then(res=>{
                console.log(res,'添加结果');
                if(res.code==1){
                    this.dialogVisible = false
                    this.$message.success(this.form.id?'修改成功':'添加成功')
                    this.getConfigList()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },

        // 删除配置项
        delSecond(id){
            this.$confirm('确定要删除该配置项吗？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                this.$http.post('/api/root/option/del',{id}).then(res=>{
                    console.log(res,'删除结果');
                    if(res.code==1){
                        this.$message.success('删除成功')
                        this.getConfigList()
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            }).catch(()=>{})
        }
    }
}
</script>
<style lang="less">
@import 'list.less';
</style>
